<!DOCTYPE html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>水果商城后台管理系统</title>
  <link rel="stylesheet" href="/layui/css/layui.css">
  <style>
    .layui-layout-admin .layui-header {
      background-color: #23262E;
    }
    .logo {
      color: #fff;
      line-height: 60px;
      font-size: 20px;
      padding-left: 20px;
    }
  </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <!-- 顶部导航栏 -->
  <div class="layui-header">
    <div class="logo">水果商城后台管理系统</div>
  </div>

  <!-- 左侧导航栏 -->
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <ul class="layui-nav layui-nav-tree">
        <li class="layui-nav-item">
          <a href="javascript:;" data-url="/system/category">商品分类管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" data-url="/system/product">商品管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" data-url="/system/order">订单管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" data-url="/system/user">用户管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;" data-url="/system/admin">管理员管理</a>
        </li>
      </ul>
    </div>
  </div>

  <!-- 内容主体区域 -->
  <div class="layui-body">
    <iframe src="" frameborder="0" id="content" style="width: 100%; height: 100%;"></iframe>
  </div>
</div>

<script src="/layui/layui.js"></script>
<script src="layui/layui.all.js"></script>
<script>
  layui.use(['element'], function(){
    var $ = layui.jquery;
    var element = layui.element;

    // 监听导航点击
    $('.layui-nav-item a').click(function(){
      var url = $(this).data('url');
      $('#content').attr('src', url);
    });

    // 默认加载商品管理页面
    $('#content').attr('src', '/system/product');
  });
</script>
</body>
</html>